import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';
import { Dialog } from 'material-ui';
import { TextButton } from './BasicButtons';

import './ModalDialog.css';

export const ButtonType = Object.freeze({
  OK: 'OK',
  CANCEL_OK: 'CANCEL_OK',
});

class ModalDialog extends Component {
  constructor(props) {
    super(props);
    this.state = {open: props.open}
  }

  handleAction = () => {
    this.setState({open: false}, () => this.props.onAction());
  }

  handleCancel = () => {
    this.setState({open: false}, () => this.props.onCancel());
  }

  componentWillReceiveProps(nextProps) {
    this.setState({open: nextProps.open});
  }

  render() {
    const { title, buttonType, children, className, contentClassName, autoContentScrollable = false } = this.props
    let actions = [];
    switch (buttonType) {
      case ButtonType.OK:
        actions.push(
          <TextButton
            label="OK"
            keyboardFocused={false}
            onTouchTap={this.handleAction}
            className={'actionLabel'}
          />
        );
        break;
      case ButtonType.CANCEL_OK:
        actions.push(
          <div className="layout-2-button" >
            <TextButton
              label="キャンセル"
              onTouchTap={this.handleCancel}
              className={'actionLabel'}
            />
          </div>
          ,
          <div className={'separator'}>{/* 区切り線 */}</div>,
          <div className="layout-2-button" >
            <TextButton
              label="OK"
              keyboardFocused={false}
              onTouchTap={this.handleAction}
              className={'actionLabel'}
            />
          </div>
        );
        break;
      default:
        throw new Error(`想定外のパラメータ: ボタン種別=${buttonType}`);
    }
    return (
      <Dialog
        title={title}
        actions={actions}
        modal={false}
        open={this.state.open}
        onRequestClose={(buttonType === ButtonType.CANCEL_OK) ? this.handleCancel : this.handleAction}
        className={className}
        contentClassName={classNames('dialogContent', contentClassName)}
        titleClassName={'dialogTitle'}
        bodyClassName={'dialogBody'}
        actionsContainerClassName={'dialogActions'}
        autoScrollBodyContent={autoContentScrollable}
      >
        {children}
      </Dialog>
    );
  }
}

/*ModalDialog.propTypes = {
  title: PropTypes.node,
  buttonType: PropTypes.oneOf(Object.values(ButtonType)).isRequired,
  open: PropTypes.bool.isRequired,
  onAction: PropTypes.func,
  onCancel: PropTypes.func,
  className: PropTypes.string,
  contentClassName: PropTypes.string,
  autoContentScrollable: PropTypes.bool,
}*/

ModalDialog.defaultProps = {
  onAction: () => {},
  onCancel: () => {},
}

export default ModalDialog
